<template>
	<view class="">


		<view class="flowChart">
			<view class="flowChart-left">
				<view class="flowChart-icon" style="position: relative;">
					<icon-svg iconClass="ren" />
				</view>
				<view class="flowChart-text">
					<view class="flowChart-text-position">部门经理</view>
					<view class="flowChart-text-name">陈赫斯</view>
				</view>
			</view>
			<view class="flowChart-line">
			</view>
			<view class="flowChart-right">
				<view class="flowChart-icon">
					<icon-svg iconClass="ren" style="color: gray;" />
				</view>
				<view class="flowChart-text">
					<view class="flowChart-text-position">出纳支付</view>
					<view class="flowChart-text-name">周小晓</view>
				</view>
			</view>
		</view>
		<navigator url="./allFlow">
		<view class="flowChart-checkAll">
			查看全部流程
		</view>
		</navigator>
		<view class="flowHistory">
			<view class="flowHistory-header">
				全部历史
				<icon-svg icon-class="icon-test6" style="margin-left:30rpx" />
			</view>
			<view class="flowHistory-detail">
				<view class="flowHistory-line1">
					<text class="hollowCircle"></text>
					2020-12-26 17:58:17
				</view>
				<view class="flowHistory-line2">
					<icon-svg icon-class="ren" style="color:#999;font-size: 40rpx; margin-right: 20rpx;" />
					陈赫斯<text style="color: #999">提交送审</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.flowChart {
		height: 200rpx;
		padding: 50rpx 100rpx;
		text-align: center;
		display: flex;
		background-color: white;

		.flowChart-left {
			height: 200rpx;
			font-size: 100rpx;
			flex: 1;
			line-height: 100rpx;
		}

		.flowChart-right {
			height: 200rpx;
			font-size: 70rpx;
			flex: 1;
			line-height: 100rpx;
		}

		.flowChart-text {
			.flowChart-text-position {
				font-size: 30rpx;
				height: 40rpx;
			}

			.flowChart-text-name {
				font-size: 20rpx;
				height: 40rpx;
				color: $uni-text-color-grey;
			}

		}

		.flowChart-line {
			border-bottom: 1rpx solid $uni-text-color-grey;
			width: 300rpx;
			height: 50rpx;
		}
	}

	.flowChart-checkAll {
		background-color: white;
		text-align: center;
		height: 50rpx;
		color: $themeColor;
	}

	.flowHistory {
		margin-top: 30rpx;
		padding: 60rpx 40rpx;
		background-color: white;

		.flowHistory-header {
			height: 50rpx;
			line-height: 50rpx;
		}

		.flowHistory-detail {
			height: 100rpx;

			.flowHistory-line1 {
				height: 70rpx;
				line-height: 70rpx;
			}

			.flowHistory-line2 {
				height: 70rpx;
				margin-left: 30rpx;
			}
		}
	}

	.hollowCircle {
		display: inline-block;
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		border: 1px solid $uni-text-color-grey;
		margin-right: 10rpx;
	}
</style>
